<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn" v-if="isprint"
      >打印预览</el-button
    >
    <div ref="print" id="printArea">
      <div
        v-for="(item, index) in dayinlist"
        :key="index">
         
          <!-- <div class="hr"></div> -->   
          <div  v-for="(ite,ind) in item.num" :key="ind">
            <!-- <p class="title center_text">{{ item.order.customer.customer_name }}</p> -->
            <!-- <p class="title center_text">{{company_name}}</p> -->
            <p class="title center_text" style="font-size: 22px;">{{item.biaoqian_name?item.biaoqian_name:Infomation}}</p>
            <!-- <hr style="line-height: 2px;margin:3px;"> -->
          <table  style="border-collapse: collapse;margin-top:15px;"  cellspacing="0">
            <tr>
              <td
                align="left"
                style="text-align: left;"
              >
              <b>[日期]：</b>{{ strDate }}
              </td>
              <td rowspan="9" align="right" valign="top" width="300">
                <vue-qr
                  :logoSrc="imageUrl"
                  :text="JSON.stringify('order_id:'+String( item.order_id))"
                  :size="120"
                ></vue-qr>
              </td>
            </tr>
            <tr>
              <td
                align="left"
                valign="middle"
                style="text-align: left;">
                <b>[客户]：</b> {{ item.order.customer?item.order.customer.customer_name:'' }}
              </td>
             
            </tr>
            <tr>
              <td
                align="left"
                style="text-align: left;"
              >
              <b>[订单号]：</b>{{ item.order.order_number }}
              </td>
            </tr>
            <tr>
              <td
                align="left"
                style="text-align: left;"
              >
              <b>[流水号]：</b>{{ item.order.order_number }}
              </td>
            </tr>
            <tr>
              <td
                align="left"
                style="text-align: left;"
              >
              <b>[产品]：</b>{{ item.order.order_number }}
              </td>
            </tr>
            <tr>
              <td
                align="left"
                style="text-align: left;"
              >
              <b>[型号]：</b>{{item.order.product_name.product_name}} {{item.order.model_number_name.model_number }}
              </td>
            </tr>
            <tr>
              <td
                align="left"
                style="text-align: left;"
              >
              <b>[规格]：</b>{{ item.order.specification?item.order.specification.specification:'' }}
              </td>
            </tr>
            <tr>
              <td
                align="left"
                style="text-align: left;"
              >
              <b>[颜色]</b> {{ item.order.color?item.order.color.color :''}}
              </td>
            </tr>
            <tr>
              <td
                align="left"
                colspan="2"
                style="text-align: left;"
              >
              <b>[件数]</b>  {{ item.models_field.cases_num}}
              </td>
            </tr>
             
          
            <tr>
              <td
                align="left"
                colspan="2"
                style="text-align: left;"
              >
              <b>[备注]：</b><span style="font-size: 14px;">{{item.order.remark}}</span>
              </td>
            </tr>
            <!-- <tr>
              <td align="center" colspan="2" valign="bottom" height="30" style="text-align: center;" class="center_text">
                <span
                  style="
                    border: 1px #000 solid;
                    padding: 3px 5px;
                    font-weight: bolder;
                  "
                  ><b>件数：</b> {{item.num}} - {{ ind+1 }}</span
                >
              </td>
            </tr> -->
          </table>
          <div style="page-break-after: always"></div>
        </div>
        
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  components: {
    vueQr,
  },
  data() {
    return {
      dayinlist: [],
      imageUrl: "",
      strDate: "",
      erweitext: "",
      isprint:true,
      Infomation:''
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    console.log( this.dayinlist)
    this.Infomation=this.$store.getters.Infomation.company_name
    this.currentTime();
  },
  methods: {
    print() {
      this.isprint=false
      this.$print(this.$refs.print);
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
    },
  },
};
</script>
<style scoped>
body{
  max-width: 755px;
}
.dayin {
  margin: 0 auto;
  /* max-width:500px; */
  box-sizing: border-box;
}

#printArea {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  margin: 0 auto;
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}
#printArea table {
  /* border: 1px solid #c5c5c5; */
}
#printArea table td,
table th {
  border: 1px solid #000;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 14px;
  padding: 5px;

}

#printArea table tr{
  /* display:inline-block; */
  line-height:18px;
}
#printArea table thead th {
  background-color: #0a8fa1;
}

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}
.hr {
  width: 100%;
  height: 2px;
  background: #333;
  margin-bottom: 15px;
  margin-top: 15px;


}

.title {
  font-size:22px;
  color: #333;
  text-align: center;
  margin: 0;
  font-weight: bold;
  display: block;
  text-align: center;
  margin-top:5px;
}
.box .left .el-row {
  margin-top: 10px;
}
.box .left .el-row .el-col {
  text-align: left;
  color: #333;
  font-weight: bold;
}
.center_text{
    text-align: center!important;
    font-size:22px;
  }
@media print { 
  .center_text{
    text-align: center!important;
    font-size: 16px;
  }
}
@page {margin: 0.3cm;}
</style>
